<!--
 * @Description: 
 * @Author: zhuying
 * @Date: 2024-11-01 16:29:11
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-06 16:19:51
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="GBK">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>att1</title>
  <style>
    /* 覆盖全局默认样式 */
    * {
        /* 去掉默认margin padding */
        margin: 0;
        padding: 0;
        /* 更改盒子模型 */
        box-sizing: border-box;
      }
      
      a {
        /* a标签去掉下划线 */
        text-decoration: none;
      }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-image: url("./img/1.jpg");
    }
    #app{
      /* border: 1px solid red; */
      width: 900px;
      height: 100%;
      /* border: 8px solid #eee; */
      border: 8px solid orange;
      /* 让div水平居中 */
      margin: auto;
      background-color: white;
    }
    .divLeft{
      float: left;
      width: 25%;
      padding-top: 15px;
      padding-left: 15px;
      

    }
    .divLeft>p:first-child{
      color: #ffd026;
      font-size: 20px;
    }
    .divLeft>p:last-child{
      color: #a6a6a6;
      font-size: 20px;
      /* font-weight: bold; */
    }
    .divCenter{
      float: left;
      /* 这里减去的值是左右宽度 */
      width: calc(100% - 25% - 25%);
    }
    form {
      /* background-color: #fff; */
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 500px; /* 给表单设置一个合适的宽度 */
    }

    h1 {
      color: rgb(255, 187, 0);
    }
    form div {
      margin-bottom: 20px;
    }

    input[type="text"],
    input[type="formInt"],
    input[type="password"],
    input[type="date"],
    input[type="email"],
    input[type="button"] {
      width: 280px;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .abc{
      width: 50%;
    }

    input[type="button"] {
      background-color: rgb(255, 221, 0);
      color: rgb(27, 20, 1);
      cursor: pointer;
      transition: background-color 0.3s ease; /* 添加过渡效果，使按钮颜色变化更平滑 */
    }

    input[type="button"]:hover {
      background-color: rgb(255, 196, 0); /* 鼠标悬停时按钮背景色变化 */
    }
    
  </style>
</head>

<body>
  <div id="app">
    <!-- 左侧 -->
    <div class="divLeft">
      <p>新用户注册</p>
      <p>USER REGISTER</p>
    </div>
    <!-- 中间 -->
    <div class="divCenter">
    <form action="">
                                                                                                                                                                                  
      <div>
        用户名：
        <input type="formInt" placeholder="请输入用户名" name="username">
      </div>
      <div>
        密码：
        <input type="password" placeholder="请输入密码" name="password">
      </div>
      <div>
        Email：
        <input type="email" placeholder="请输入Email" name="Email">
      </div>
      <div>
        姓名：
        <input type="formInt" placeholder="请输入姓名" name="name">
      </div>
      <div>
        手机号：
        <input type="text" placeholder="请输入手机号" name="number">
      </div>
      <div>
        性别：
        <label for="genderNan">
          男<input id="genderNan" type="radio" name="gender" value="男">
        </label>
        女<input type="radio" name="gender" value="女">
      </div>
      <div>
        生日：
        <input type="date" name="birth">
      </div>
      <div>
        验证码：
        <input class="abc" type="text" name="code">
        <img id="imgCode" src="img\iwEcAqNqcGcDAQTRAIMFKAawcPbpOJIJWlIHEHc4APmaAAfSItEIEggACaJpbQoAC9EaOw.jpg_720x720q90.jpg" alt="">

      </div>
      
      <input type="button" value="注册">
      <!-- 右侧 -->
      <div class="divRight">
        <p>已有账号？<a href="#">立即登录</a></p>
      </div>
    </div>
  </form>
</body>

</html>